<template>
  <div id="app">
    <h2>----------app内容-----------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updataName">修改名字</button>
    <h2>{{$store.getters.fullname}}</h2>
     <h2>{{$store.getters.fullname2}}</h2>
     <h2>{{$store.getters.fullname3}}</h2>
     <button @click="asyncUpdataName">异步修改名字</button>
    <h2>----------app内容-----------</h2>
   <h2>{{message}}</h2>
   <!-- <h2>{{counter}}</h2> -->
   <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
   <button @click="subtraction">-</button>
   <button @click="addCount(5)">+5</button>
   <button @click="addCount(10)">+10</button>
   <button @click="addStudent">添加学生</button>
   <!-- <button @click="counter++">+</button>
   <button @click="counter--">-</button> -->
   <h2>----------app内容：getters相关信息----------</h2>
   <!-- <h2>{{$store.state.counter*$store.state.counter}}</h2> -->
   <h2>{{$store.getters.powerCounter}}</h2>
   <h2>{{$store.getters.more20stu}}</h2>
   <h2>{{$store.getters.more20stuLength}}</h2>
   <h2>{{$store.getters.moreAgestu(12)}}</h2>
   <!-- <h2>{{more20stu}}</h2> -->

   <h2>----------app内容：info对象的内容是否是响应式的----------</h2>
   <h2>{{$store.state.info}}</h2>
   <button @click="updateInfo">修改信息</button>
   
   <h2>----------hello vuex内容-----------</h2>
   <hello-vuex></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex.vue'

import {INCREMENT} from "./store/mutations_type"

export default {
  name: 'app',
  data(){
    return{
      message:"我是App组件",
      // counter:0
    }
  },
  components: {
    HelloVuex
   
  },
  computed:{
    // more20stu(){
    //   // 写法一
    //   // return this.$store.state.students.filter(s =>{
    //   //   return s.age > 20
    //   //  })
    //   // 写法二
    //   return this.$store.state.students.filter(s =>s.age > 20)
    // }
  },
  methods:{
    addition(){
      // 提交  通过vuex管理数据 increment vuex定义的修改数据的方法
      // this.$store.commit('increment')
       this.$store.commit(INCREMENT)

    },
    subtraction(){
      this.$store.commit('decrement')
    },
    // 传递一个参数的情况
    addCount(count){
      // payload:负载
      // 1.普通的提交风格
      // this.$store.commit('incrementCount',count)
      // 2.特殊的提交风格
      this.$store.commit({
        // 事件类型
        type:'incrementCount',
        count
      })
    },
    addStudent(){
      const stu = {id:114,name:'alan',age:35}
       this.$store.commit("addStudent",stu)
    },
    updateInfo() {
      // this.$store.commit("updateInfo")
      // this.$store.dispatch('aUpdateInfo',"我是payload")
// 回调
      // this.$store.dispatch('aUpdateInfo', ()=>{
      //   window.console.log('里面已经完成了');
      // })
// 不仅回调还要携带参数  那就传入一个大的对象
      // this.$store.dispatch('aUpdateInfo', {
      //   message:'我是携带的信息',
      //   success:()=>{
      //     window.console.log('里面已经完成了');
      //   }
      // })

      this.$store.dispatch('aUpdateInfo','我是携带的信息').then(res =>{
          window.console.log('里面完成了提交')
          window.console.log(res)
        })
    },
    updataName() {
      this.$store.commit('updataName','李四')
    },
    asyncUpdataName(){
       this.$store.dispatch('aUpdateName')
    }
  
  }
}
</script>

<style>

</style>
